import { FC } from "react";
import { View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import styles from "./index.module.less";
import { HIcon } from "@/components";

const tags = [
  {
    label: "专属会员身份标识",
    icon: "zuanshi",
    desc: "会员专属的身份标识,优先为您上墙、置顶,让更多的会员看到您",
    iconColor: "#FD486E",
    iconSize: 50,
  },
  {
    label: "免费上头条N次",
    icon: "toutiao",
    desc: "在公众号上推送头条文章",
    iconColor: "#FF7B43",
    iconSize: 50,
  },
  {
    label: "免费朋友圈转发N次",
    icon: "weixin",
    desc: "在所有红娘微信朋友圈转发会员资料，提高曝光度",
    iconColor: "#00A400",
    iconSize: 50,
  },
  {
    label: "解锁访客访问记录/收藏",
    icon: "keaide",
    desc: "可查看访问过我和收藏了我的会员,了解对我感兴趣的那个Ta",
    iconColor: "#EA00C1",
    iconSize: 50,
  },
  {
    label: "专属牵线名额",
    icon: "diamond-o",
    desc: "可牵线自己中意的那个Ta",
    iconColor: "#0286A2",
    iconSize: 50,
  },
];

const Benefit: FC = () => {
  const onTag = (item) => {
    Taro.showModal({
      content: item.desc,
      showCancel: false,
      confirmColor: "#FD4067",
    });
  };

  return (
    <View className={styles["benefit-wrapper"]}>
      <View className={styles["title"]}>VIP会员专属特权</View>
      <View className={styles["benefit-content"]}>
        {tags.map((item, index) => (
          <View
            className={styles["item"]}
            key={index}
            onClick={() => onTag(item)}
          >
            <HIcon
              type={item.icon}
              size={item.iconSize}
              color={item.iconColor}
            />
            <View className={styles["tt"]}>
              <Text>{item.label}</Text>
              <HIcon type="bangzhu"></HIcon>
            </View>
          </View>
        ))}
      </View>
    </View>
  );
};

export default Benefit;
